<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="设备编号：">
        <el-input v-model="message" placeholder="请输入">
          <template #suffix>
            <i
              class="el-icon-circle-close"
              v-if="message"
              @click="message = ''"
            ></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSearch"
          icon="el-icon-search"
          size="small"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="bottom">
      <el-table :data="vendingList" highlight-current-row>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          :index="getIndex"
        ></el-table-column>
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="296"
        ></el-table-column>
        <el-table-column
          prop="type.name"
          label="设备型号"
          width="296"
        ></el-table-column>
        <el-table-column
          prop="node.name"
          label="详细地址"
          width="296"
        ></el-table-column>
        <el-table-column prop="vmStatus" label="运营状态"></el-table-column>
        <el-table-column label="设备状态" width="300">
          <el-button type="text" round class="leave">离线</el-button>
          <el-button type="text" round class="huodao">货道</el-button>
          <el-button type="text" round class="zhou">传动轴</el-button>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="text" @click="getVmDetail(scope.row.innerCode)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" v-if="flag">
        <p>
          <span>共{{ totalCount }}条记录</span>
          <i>第{{ params.pageIndex }}/{{ totalPage }}页</i>
        </p>
        <div class="footer-btns">
          <el-button
            size="mini"
            @click="prePage()"
            :disabled="params.pageIndex === 1"
            :class="{ disbale: params.pageIndex == 1 }"
            >上一页</el-button
          >
          <el-button
            size="mini"
            @click="nextPage()"
            :disabled="params.pageIndex == totalPage"
            :class="{ disbale: params.pageIndex == totalPage }"
            >下一页</el-button
          >
        </div>
      </div>
      <!-- 设备详情 -->
      <el-dialog
        title="设备详情"
        :visible.sync="dialogFormVisible"
        custom-class="add-dialog"
      >
        <div class="box">
          <div class="sale">
            <div>
              销售量：<span>{{ goodsCount }}个</span>
            </div>
            <div>
              销售额：<span>{{ goodsMoney }}元</span>
            </div>
            <div>
              捕获次数：<span>{{ supplyCount }}次</span>
            </div>
            <div>
              维修次数：<span>{{ repairCount }}次</span>
            </div>
          </div>
          <div class="title">商品销量（月）</div>
          <ul>
            <li v-for="(item, index) in skuCollect" :key="index">
              <div class="sin-line">{{ item.skuName }}</div>
              ：{{ item.count }}
            </li>
          </ul>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getVendingList,
  getSkuCollect,
  getRepairCount,
  getSupplyCount,
  getGoodsCount,
  getGoodsMoney
} from '@/api/device'
export default {
  name: 'devicestate-page',
  components: {},
  props: {},
  data() {
    return {
      message: '',
      dialogFormVisible: false,
      vendingList: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: ''
      },
      totalCount: null,
      totalPage: null,
      addForm: {
        region: ''
      },
      skuCollect: [],
      repairCount: '',
      supplyCount: '',
      goodsCount: '',
      goodsMoney: '',
      flag: 'true'
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getVendingList()
  },
  methods: {
    async getVendingList() {
      this.params.innerCode = ''
      const res = await getVendingList(this.params)
      console.log(res)
      res.currentPageRecords.forEach((item) => {
        if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 3) {
          item.vmStatus = '撤机'
        }
      })
      this.vendingList = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    getIndex(index) {
      return (this.params.pageIndex - 1) * this.params.pageSize + index + 1
    },
    prePage() {
      this.params.pageIndex--
      this.getVendingList()
    },
    nextPage() {
      this.params.pageIndex++
      this.getVendingList()
    },
    async onSearch() {
      if (this.message === '') {
        this.flag = true
        return this.getVendingList()
      } else {
        this.flag = false
        this.params.innerCode = this.message
        const res = await getVendingList(this.params)
        res.currentPageRecords.forEach((item) => {
          if (item.vmStatus === 1) {
            item.vmStatus = '运营'
          } else if (item.vmStatus === 0) {
            item.vmStatus = '未投放'
          } else if (item.vmStatus === 3) {
            item.vmStatus = '撤机'
          }
        })
        this.vendingList = res.currentPageRecords
      }
    },
    async getVmDetail(id) {
      this.dialogFormVisible = true
      const res1 = await getSkuCollect(id)
      this.skuCollect = res1
      const res2 = await getRepairCount(id)
      this.repairCount = res2
      const res3 = await getSupplyCount(id)
      this.supplyCount = res3
      const res4 = await getGoodsCount(id)
      this.goodsCount = res4
      const res = await getGoodsMoney(id)
      if (res.length <= 6) {
        return (this.goodsMoney = res / 100)
      } else {
        return (this.goodsMoney = Math.round(res / 1000000).toFixed(2) + '万')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  background-color: #fff;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-form-item {
    padding-left: 15px;
    margin-top: 22px;
    ::v-deep .el-input__inner {
      width: 206px;
      padding: 0 30px 0 15px;
      height: 36px;
    }
  }
  .el-form-item:nth-child(2) {
    padding-left: 0;
  }
  .el-button {
    height: 36px;
    width: 80px;
    border-radius: 5px;
  }
}
.bottom {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  ::v-deep .el-table .has-gutter tr th {
    background-color: #f3f6fb !important;
    border-bottom: 0 !important;
    padding: 10px 0;
    color: #666;
    font-weight: normal;
  }
  ::v-deep .el-table .has-gutter tr th:first-child {
    border-radius: 5px 0 0 5px;
  }
  ::v-deep .el-table .has-gutter tr th:nth-child(8) {
    border-radius: 0 5px 5px 0;
  }
  ::v-deep .el-table__cell {
    padding: 3px 0;
    border-bottom: 0;
    .el-button {
      color: #5f84ff;
    }
    .leave {
      width: 52px;
      height: 23px;
      padding: 0;
      color: #fff;
      background-color: #ffb43a;
    }
    .huodao {
      width: 52px;
      height: 23px;
      padding: 0;
      color: #fff;
      background-color: #48d698;
    }
    .zhou {
      width: 66px;
      height: 23px;
      padding: 0;
      color: #fff;
      background-color: #48d698;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 16px;
    p {
      font-size: 16px;
      line-height: 28px;
      color: #dbdfe5;
    }
    .el-button {
      margin: 0 10px;
      background-color: #d5ddf8;
      height: 32px;
      color: #606266;
    }
  }
}
.disbale {
  background-color: #edf0f9 !important;
  color: #d8dde3 !important;
}
.el-icon-circle-close {
  margin-right: 5px;
  color: #dfe4e7;
}
.el-icon-circle-close:hover {
  color: #7f7270;
  cursor: pointer;
}

::v-deep .add-dialog {
  .el-dialog__title {
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
  }
  width: 630px;
  border-radius: 10px;
  font-size: 14px;
  color: #666;
  .el-dialog__body {
    padding: 20px 20px 30px;
  }
  .box {
    margin: 0 5.5px;
    .sale {
      display: flex;
      height: 54px;
      text-align: center;
      align-items: center;
      background-color: #f4f6fb;
      div {
        flex: 1;
        span {
          color: #5f84ff;
        }
      }
    }
    .title {
      margin: 20px 0 12px 6px;
      line-height: 16px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-top: 1px solid #d8dde3;
      border-left: 1px solid #d8dde3;
      li {
        display: flex;
        width: 25%;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        border-right: 1px solid #d8dde3;
        border-bottom: 1px solid #d8dde3;
        div {
          width: 58.3%;
        }
      }
    }
  }
}
</style>
